UI darajasini oshiring: Matnni belgilash uslubi uchun CSS Custom Highlight API'ni o'zlashtirish

Ushbu misolda biz code-highlight deb nomlangan maxsus belgi nomini aniqladik. Keyin bu belgini code elementlariga qo'lladik. Fon rangi och ko'k (#ADD8E6), matn rangi to'q ko'k (#00008B) va shrift qalinligi 'bold' qilib belgilangan. Endi code elementi ichida matn tanlanganda, u ushbu maxsus uslublar bilan bezatiladi.

Kengaytirilgan foydalanish: Muayyan matn diapazonlarini nishonga olish

CSS Custom Highlight API, shuningdek, element ichidagi ma'lum matn diapazonlarini nishonga olish uchun ham ishlatilishi mumkin. Bu matn belgilash uslubini yanada nozik nazorat qilish imkonini beradi.

Misol: Qidiruv so'zlarini ajratib ko'rsatish

Hujjat ichida qidiruv so'zlarini ajratib ko'rsatmoqchi ekanligingizni tasavvur qiling. Bu ko'pincha CSS Highlight API bilan birgalikda JavaScript'ni talab qiladi.

1. Qidiruv so'zlarini aniqlash uchun JavaScript'dan foydalaning: Hujjat ichida qidiruv so'zining barcha takrorlanishlarini topish uchun JavaScript'dan foydalaning.
2. Belgilash diapazonlarini yarating: Qidiruv so'zining har bir takrorlanishi uchun diapazonlar yaratish uchun JavaScript'dagi Range API'sidan foydalaning.
3. Belgini qo'llang: Yaratilgan diapazonlarga belgini qo'llash uchun CSS.highlights.set() usulidan foydalaning.

            
// Qidiruv so'zlarini ajratib ko'rsatish uchun JavaScript kodi
function highlightSearchTerms(searchTerm) {
  // Avval, CSS'da maxsus belgini aniqlang
  const highlightName = 'search-highlight';
  const ranges = [];

  // Barcha matn tugunlarini topish
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Belgilarni CSS.highlights.set() yordamida qo'llash
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('CSS Custom Highlight API bu brauzerda to\'liq qo\'llab-quvvatlanmaydi. Zaxira varianti taqdim etilmoqda');
    // Cheklangan qo'llab-quvvatlashga ega brauzerlar uchun zaxira variantini taqdim etish (masalan, eski Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Och qizg'ish
      span.style.color = '#000000'; // Qora
      span.className = 'search-highlight-fallback'; // Zaxira uslubi uchun sinf qo'shish
      range.surroundContents(span);
    });
  }
}

// Qidiruv belgisini uslublash uchun CSS kodi
::highlight(search-highlight) {
  background-color: #FFA07A; /* Och qizg'ish */
  color: #000000; /* Qora */
}

/* API'ni to'liq qo'llab-quvvatlamaydigan brauzerlar uchun zaxira uslubi */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Foydalanish misoli: "example" atamasini ajratib ko'rsatish
highlightSearchTerms("example");

            

              
                Copy
              
            
          

Ushbu kod parchasi hujjat ichida JavaScript va CSS Custom Highlight API yordamida qidiruv so'zlarini qanday ajratib ko'rsatishni namoyish etadi. JavaScript kodi qidiruv so'zlarini aniqlaydi, har bir takrorlanish uchun diapazonlar yaratadi va ushbu diapazonlarga search-highlight belgisini qo'llaydi. So'ngra CSS kodi ajratilgan matnni och qizg'ish fon va qora matn bilan uslublaydi.

Muhim eslatma: Bu yondashuv JavaScript'ni talab qiladi va CSS.highlights API'siga tayanadi. Qo'llab-quvvatlash universal bo'lmagani uchun zaxira mexanizmi (matnni `span` bilan o'rash va shu `span`ni uslublash kabi) ko'rsatilgan.

Qulaylik masalalari

CSS Custom Highlight API'dan foydalanganda, veb-saytingiz barcha, jumladan, nogironligi bo'lgan foydalanuvchilar uchun ham qulay bo'lishini ta'minlash uchun qulaylikni hisobga olish juda muhim.

Qulay matn belgilash uslubi uchun maslahatlar:

• Yetarli kontrastni ta'minlang: Ko'rish qobiliyati cheklangan foydalanuvchilar uchun o'qishni osonlashtirish maqsadida tanlangan matnning fon va matn rangi o'rtasida yetarli kontrastni saqlang. WCAG ko'rsatmalarida oddiy matn uchun kamida 4.5:1 kontrast nisbati tavsiya etiladi.
• Faqat rangga tayanmang: Matn belgisini ko'rsatish uchun faqat rangga tayanmang. Belgilashni yanada aniqroq qilish uchun tagiga chizish yoki qalinlashtirish kabi qo'shimcha vizual belgilardan foydalaning.
• Yuqori kontrast rejimi uchun muqobil uslubni taqdim eting: Operatsion tizimida yuqori kontrast rejimini yoqadigan foydalanuvchilar sizning maxsus uslublaringizni bekor qilishi mumkin. O'qishni osonlashtirish uchun yuqori kontrast rejimida yaxshi ishlaydigan muqobil uslubni taqdim eting. Yuqori kontrast rejimi yoqilganligini aniqlash uchun @media (forced-colors: active) kabi media so'rovlaridan foydalanishingiz mumkin.
• Yordamchi texnologiyalar bilan sinab ko'ring: Tanlangan matn to'g'ri e'lon qilinishi va tushunilishini ta'minlash uchun veb-saytingizni ekran o'quvchilari kabi yordamchi texnologiyalar bilan sinab ko'ring.

Misol: Yetarli kontrastni ta'minlash

            
::highlight {
  background-color: #000080; /* To'q moviy */
  color: #FFFFFF; /* Oq */
}

            

              
                Copy
              
            
          

Ushbu misolda biz to'q moviy fon rangi va oq matn rangini tanladik, bu ko'rish qobiliyati cheklangan foydalanuvchilar uchun yetarli kontrastni ta'minlaydi. Rang tanlovlaringiz qulaylik standartlariga mos kelishini tekshirish uchun har doim rang kontrasti tekshiruvchisidan foydalaning. WebAIM'ning Kontrast Tekshiruvchisi kabi vositalar yordam berishi mumkin.

Amaliy misollar va qo'llash holatlari

CSS Custom Highlight API foydalanuvchi tajribasini yaxshilash uchun keng imkoniyatlarni taqdim etadi. Mana bir nechta amaliy misollar va qo'llash holatlari:

• Kod ajratish: Yuqorida ko'rsatilganidek, siz API'dan kod parchalarini maxsus uslublar bilan ajratib ko'rsatish uchun foydalanishingiz mumkin, bu ularni vizual jihatdan jozibaliroq va o'qish uchun osonroq qiladi.
• Qidiruv so'zlarini ajratish: Foydalanuvchilarga kerakli ma'lumotni tezda topishga yordam berish uchun hujjat ichidagi qidiruv so'zlarini ajratib ko'rsating.
• Xatoliklarni ajratish: Foydalanuvchi e'tiborini jalb qilish uchun shakllar yoki boshqa foydalanuvchi interfeyslaridagi xato yoki ogohlantirishlarni ajratib ko'rsating.
• Iqtiboslarni ajratish: Akademik maqolalar yoki nashrlardagi iqtibos keltirilgan matnni asosiy mazmundan vizual ravishda ajratib ko'rsating.
• Suhbatlarni ajratish: Chat ilovalarida foydalanuvchining o'z xabarlarini yoki ma'lum foydalanuvchilarning xabarlarini kuzatishni osonlashtirish uchun ajratib ko'rsating.
• O'yinlashtirish: O'yinchiga maslahatlar yoki yo'l-yo'riqlar berish uchun o'yindagi ma'lum so'z yoki iboralarni ajratib ko'rsating.
• Matnni qisqartirish: Mazmunning qisqacha xulosasini taqdim etish uchun hujjatdagi asosiy gaplar yoki iboralarni ajratib ko'rsating. Bu ko'pincha muhimlikni aniqlash uchun murakkab algoritmlarni o'z ichiga oladi.

Eng yaxshi amaliyotlar va maslahatlar

CSS Custom Highlight API'dan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlar va maslahatlarga rioya qiling:

• Tavsiflovchi belgi nomlaridan foydalaning: Belgining maqsadini aniq ko'rsatadigan tavsiflovchi belgi nomlarini tanlang. Bu kodingizni o'qish va saqlashni osonlashtiradi. Masalan, highlight-1 o'rniga code-highlight dan foydalaning.
• Uslublarni izchil saqlang: Yaxlit foydalanuvchi tajribasini yaratish uchun barcha belgilaringizda izchil uslubni saqlang. Izchillikni ta'minlash uchun dizayn tizimi yoki uslublar qo'llanmasidan foydalaning.
• Belgilardan ortiqcha foydalanishdan saqlaning: Belgilardan ortiqcha foydalanmang, chunki bu foydalanuvchilarni chalg'itishi va bezdirishi mumkin. Ularni tejamkorlik bilan va strategik tarzda eng muhim ma'lumotlarga e'tibor qaratish uchun foydalaning.
• Turli qurilmalar va brauzerlarda sinab ko'ring: Maxsus belgilaringiz to'g'ri ko'rsatilishini ta'minlash uchun veb-saytingizni turli qurilmalar va brauzerlarda sinab ko'ring. Mobil qurilmalar va eski brauzerlarga alohida e'tibor bering.
• Ishlash samaradorligini hisobga oling: CSS Custom Highlight API odatda samarali bo'lsa-da, ayniqsa katta hujjatlarda foydalanayotgan belgilar soniga e'tiborli bo'ling. Juda ko'p belgilar ishlash samaradorligiga ta'sir qilishi mumkin. Agar belgilarni boshqarish uchun JavaScript'dan foydalanayotgan bo'lsangiz, DOM manipulyatsiyalari sonini kamaytirish uchun kodingizni optimallashtiring.
• Progressiv yaxshilanishdan foydalaning: Brauzerlarni qo'llab-quvvatlash universal emasligi sababli, progressiv yaxshilanish usullaridan foydalaning. Eski brauzerlardagi foydalanuvchilar uchun tajribaning qulay bo'lib qolishini ta'minlash uchun standart CSS uslubi yordamida zaxira mexanizmini joriy qiling. API yoki zaxira variantidan foydalanishni aniqlash uchun xususiyatlarni aniqlashdan (masalan, `CSS.highlights` mavjudligini tekshirish) foydalanishni o'ylab ko'ring.

Xulosa

CSS Custom Highlight API foydalanuvchi tajribasini yaxshilash va vizual jihatdan jozibaliroq va ma'lumotli matn belgilarini yaratish uchun kuchli vositadir. Ushbu API'ni o'zlashtirib, siz o'z UI dizayningizni keyingi bosqichga olib chiqishingiz va foydalanuvchilarga yanada jozibali va qulay veb-tajribasini taqdim etishingiz mumkin. Brauzerlarni qo'llab-quvvatlash hali ham rivojlanayotgan bo'lsa-da, ushbu API'ni hozirdan tushunish va tajriba o'tkazish, qabul qilinishi ortib borishi bilan sizni eng ilg'or veb-tajribalarini yaratishga tayyorlaydi. Barcha foydalanuvchilar uchun ijobiy tajribani ta'minlash uchun qulaylikka ustuvorlik berishni va eski brauzerlar uchun zaxira variantlarini taqdim etishni unutmang.

Resurslar

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Kontrast Tekshiruvchisi